<template>
	<div class="top">
		<div class="rg-date">{{ nowTime }} {{ xqTime }}</div>
		<div class="rg-date_sfm">{{ jtTime }}</div>
		<div class="jianqu">
			<div class="jq"></div>
			<span>{{ usersObj?.unitName || "" }}</span>
		</div>

		<div class="date">
			<div class="rq">{{ nowTime }}</div>
			<div class="sj">{{ jtTime }}</div>
			<div class="xq">{{ xqTime }}</div>
		</div>


	</div>
	<div class="tow_mian">
		<div class="tow_content">

			<div class="bigNav_box">

				<div class="back_box flex_center_center" @click="navUrl">
					<el-icon style="margin-right: 6px;" color="#409efc" :size="20" class="no-inherit">
						<Back />
					</el-icon>
					<div>
						返回
					</div>
				</div>
				<div class="nav_box">
					<el-menu active-text-color="#ffd04b" background-color="#08306182" class="el-menu-vertical-demo"
						:default-active="menuValue" text-color="#fff" @open="handleOpen" @close="handleClose">
						<el-sub-menu index="1">
							<template #title>
								<span>值班日志</span>
							</template>

							<el-menu-item-group>
								<el-menu-item @click="menuCode = 'zbrz'" index="1-1">指挥中心值班日志</el-menu-item>
								<el-menu-item @click="menuCode = 'jqjjb'" index="1-2">监区值班日志</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>
						<el-sub-menu index="2">
							<template #title>
								<span>值班人员</span>
							</template>

							<el-menu-item-group>
								<el-menu-item @click="zbryClick('zhzx')" index="2-1">指挥中心值班人员</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>

						<el-menu-item index="3" @click="menuCode = 'zfxx'">
							<span>罪犯信息</span>
						</el-menu-item>

						<el-menu-item index="4" @click="menuCode = 'zdzf'">
							<span>重点罪犯</span>
						</el-menu-item>
						
						<el-menu-item index="6" @click="menuCode = 'xmzf'">
							<span>刑满罪犯</span>
						</el-menu-item>

						<el-sub-menu index="8">
							<template #title>
								<span>整点上报</span>
							</template>
							<el-menu-item-group>
								<el-menu-item @click="menuCode = 'zdsb'" index="8-1">整点上报记录</el-menu-item>
								<el-menu-item @click="menuCode = 'zdsbry'" index="8-2">整点上报人员</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>

						<el-menu-item index="7" @click="menuCode = 'jlsb'">
							<span>警力上报</span>
						</el-menu-item>

						<el-menu-item index="8" @click="menuCode = 'mryq'">
							<span>监狱每日要情</span>
						</el-menu-item>

						<el-sub-menu index="10">
							<template #title>
								<span>应急物资</span>
							</template>

							<el-menu-item-group>
								<el-menu-item @click="menuCode = 'yjwzType'" index="10-1">物资类型</el-menu-item>

								<el-menu-item @click="menuCode = 'yjwzJl'" index="10-2">应急物资台账</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>

						<el-sub-menu index="11">
							<template #title>
								<span>信息上报</span>
							</template>

							<el-menu-item-group>
								<el-menu-item @click="menuCode = 'xxsbType'" index="11-1">信息上报一级</el-menu-item>
								<el-menu-item @click="menuCode = 'xxsbTypeEr'" index="11-3">信息上报二级</el-menu-item>

								<el-menu-item @click="menuCode = 'xxsbJl'" index="11-2">信息上报记录</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>
				
						<el-menu-item index="13" @click="menuCode = 'qksb'">
							<span>情况上报</span>
						</el-menu-item>

					</el-menu>
				</div>
			</div>
			<div class="content">
				<div v-if="menuCode == 'zbrz'" style="padding-top: 10px">
					<jjbjlTwo :orgName="usersObj.orgName" :orgIds="usersObj.orgId" :menuValue="menuValue"
						:jqArr="jqArr" />
				</div>
				<!-- 监区交接班 -->
				<div v-if="menuCode == 'jqjjb'" style="padding-top: 10px">
					<towJqjjb :orgName="usersObj.orgName" :orgIds="usersObj.orgId" :menuValue="menuValue" />
				</div>
				<!-- 值班人员 -->
				<div v-if="menuCode == 'zbry'" style="padding-top: 10px">
					<towZbry :jqArr="jqArr" :isText="isText" />
				</div>
				<div v-if="menuCode == 'jqzbry'" style="padding-top: 10px">
					<towJqZb :jqArr="jqArr" />
				</div>
				<!-- 罪犯信息 -->
				<div v-if="menuCode == 'zfxx'" style="padding-top: 10px">
					<towZfxx :jqArr="jqArr" />
				</div>
				<!-- 重点罪犯 -->
				<div v-if="menuCode == 'zdzf'" style="padding-top: 10px">
					<zdzf :jqArr="jqArr" />
				</div>
				<!-- 整点上报 -->
				<div v-if="menuCode == 'zdsb'" style="padding-top: 10px">
					<towZdsbJl :jqArr="jqArr" />
				</div>
				<!-- 上报人员 -->
				<div v-if="menuCode == 'zdsbry'" style="padding-top: 10px">
					<towZdsbRy :jqArr="jqArr" />
				</div>

				<!-- 警力上报上报 -->
				<div v-if="menuCode == 'jlsb'" style="padding-top: 10px">
					<towJlsb :jqArr="jqArr" />
				</div>
				<!-- 刑满罪犯 -->
				<div v-if="menuCode == 'xmzf'" style="padding-top: 10px">
					<towXmzf :jqArr="jqArr" />
				</div>
				<!-- 监狱要情 -->
				<div v-if="menuCode == 'mryq'" style="padding-top: 10px">
					<mryq :orgName="usersObj.orgName" :orgIds="usersObj.orgId" :menuValue="menuValue" />
				</div>

				<!-- 信息上报记录 -->
				<div v-if="menuCode == 'xxsbJl'" style="padding-top: 10px">
					<towXxsbJl :orgIds="usersObj.orgId" :jqArr="jqArr" />
				</div>
				<!-- 信息上报类型 -->
				<div v-if="menuCode == 'xxsbType'" style="padding-top: 10px">
					<towXxsbType :orgIds="usersObj.orgId" :jqArr="jqArr" />
				</div>
				<!-- 信息上报类型二 -->
				<div v-if="menuCode == 'xxsbTypeEr'" style="padding-top: 10px">
					<towXxsbTypeEr :orgIds="usersObj.orgId" :jqArr="jqArr" />
				</div>

				<!-- 应急物资类型 -->
				<div v-if="menuCode == 'yjwzType'" style="padding-top: 10px">
					<towYjwzType :orgIds="usersObj.orgId" :jqArr="jqArr" />
				</div>


				<!-- 应急物资记录 -->
				<div v-if="menuCode == 'yjwzJl'" style="padding-top: 10px">
					<towYjwzJl :orgIds="usersObj.orgId" :jqArr="jqArr" />
				</div>

				<!-- 上报状态 -->
				<div v-if="menuCode == 'sbzt'" style="padding-top: 10px">
					<towYjwzJl :orgIds="usersObj.orgId" :jqArr="jqArr" />
				</div>
				<!-- 常用状态 -->
				<div v-if="menuCode == 'cyzt'" style="padding-top: 10px">
					<towYjwzJl :orgIds="usersObj.orgId" :jqArr="jqArr" />
				</div>

				<!-- 情况上报 -->
				<div v-if="menuCode == 'qksb'" style="padding-top: 10px">
					<towQksbType :orgIds="usersObj.orgId" :jqArr="jqArr" />
				</div>

			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		Document,
		Menu as IconMenu,
		Location,
		Setting,
		Back,
		Right,
	} from "@element-plus/icons-vue";

	import http from "@/utils/api";
	import jjbjlTwo from "../components/jjbjlTwo.vue";
	import towJqjjb from "../components/towJqjjb.vue";
	import mryq from "../components/mryq.vue";
	import towZfxx from "../components/towZfxx.vue";
	import zdzf from "../components/zdzf.vue";
	import towZdsb from "../components/towZdsb.vue";
	import towJlsb from "../components/towJlsb.vue";
	import towZbry from "../components/towZbry.vue";
	import towXmzf from "../components/towXmzf.vue";
	import towZdsbRy from "../components/towZdsbRy.vue";
	import towZdsbJl from "../components/towZdsbJl.vue";
	import towJqZb from "../components/towJqZb.vue";
	import towXxsbType from "../components/towXxsbType.vue";
	import towXxsbTypeEr from "../components/towXxsbTypeEr.vue";
	import towYjwzType from "../components/towYjwzType.vue";
	import towYjwzJl from "../components/towYjwzJl.vue";

	import towQksbType from "../components/towQksbType.vue";

	import towXxsbJl from "../components/towXxsbJl.vue";
	import router from "@/router";
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		onBeforeMount,

	} from "vue";

	/**
	 * 当地账号信息
	 */
	let usersObj = ref({});

	/**
	 * 菜单选中值
	 */
	let menuValue = ref("1-1");

	/**
	 * 点名菜单点击
	 *
	 */
	let textStr = ref("");
	const dmClick = (is) => {
		menuCode.value = "dm";
		textStr.value = is;
	};
	/**
	 *
	 * 菜单动态值
	 *
	 */
	let menuCode = ref("zbrz");

	const handleOpen = (key, keyPath) => {};
	const handleClose = (key, keyPath) => {};

	let isText = ref("");
	const zbryClick = (is) => {
		isText.value = is;
		menuCode.value = "zbry";
	};


	let pids = ref(0);
	let pidObj = ref({});
	const getShiftSelect = async () => {
		let resz = await http.znjw.ShiftSelect({
			type: "jq",
			pId: 0,
			orgId: usersObj.value.orgId,
			startDate: "",
			endDate: "",
			isLock: 0,
			zbType: "1",
		});
		if (resz && resz.code == 0 && resz.data.length) {
			pids.value = resz.data[0].id;
			pidObj.value = resz.data[0];
		}
	};
	let jqArr = ref([]);
	onBeforeMount(() => {
		jqArr.value = JSON.parse(sessionStorage.getItem("jqArr"));
		usersObj.value = JSON.parse(sessionStorage.getItem("userInfo"));
		getShiftSelect();
	});

	const navUrl = (url) => {

		router.push("/");
	};

	// 分割----------------------------------------------------

	const nowTime = ref("");
	const jtTime = ref("");
	const xqTime = ref("");
	[{
			state: 1
		},
		{
			state: 2
		},
		{
			state: 3
		},
		{
			state: 4
		},
		{
			state: 5
		},
		{
			state: 6
		},
	];
	//格式化
	const complement = (value) => {
		return value < 10 ? `0${value}` : value.toString();
	};

	// 日期
	const formateDate = () => {
		const time = new Date();
		const year = time.getFullYear();
		const month = complement(time.getMonth() + 1);
		const day = complement(time.getDate());
		return `${year}年${month}月${day}日`;
	};
	//时间
	const formatejtDate = () => {
		const time = new Date();
		const hour = complement(time.getHours());
		const minute = complement(time.getMinutes());
		const second = complement(time.getSeconds());
		return ` ${hour}:${minute}:${second}`;
	};
	//星期
	const formatexqDate = () => {
		const time = new Date();
		const week = "星期" + "日一二三四五六".charAt(time.getDay());
		return week;
	};
	let timer = 0;

	onMounted(() => {
		timer = setInterval(() => {
			nowTime.value = formateDate();
			jtTime.value = formatejtDate();
			xqTime.value = formatexqDate();
		}, 1000);
	});
	/**
	 * 取消定时器
	 */
	onBeforeUnmount(() => {
		clearInterval(timer); //清除定时器
		timer = 0;
	});
</script>

<style scoped lang="scss">
	/**
弹窗样式修改
 */

	::v-deep .el-dialog {
		background-color: rgb(8, 32, 78) !important;
		min-height: auto;
		padding: 0px 0px 10px 0px;

		.el-dialog__header {
			// display: none;
			padding: 0px !important;
			height: 32px;
			color: white;
			line-height: 32px;
			margin-bottom: 4px;
			text-align: center;
			border-bottom: 1px solid rgb(5, 112, 146);

			.el-dialog__title {
				color: white;
				transform: translateX(12px);
				display: inline-block;
				font-size: 16px;
			}
		}

		.el-dialog__footer {
			transform: translate(-15px, -8px);
		}

		.el-dialog__headerbtn {
			width: auto;
			height: auto;
			right: 24px;
			top: 8px;
		}
	}

	::v-deep .jjb {
		.el-table .el-table__cell {
			padding: 2px 0 !important;
			background: rgb(8, 38, 78) !important;
		}

		.el-table th.el-table__cell.is-leaf {
			background: rgb(8, 38, 78) !important;
		}

		.el-table .cell {
			font-size: 12px !important;
		}

		.el-table thead {
			color: #ffffff !important;
			display: none;
		}

		.el-table .el-table__cell {
			padding: 2px 4px;
		}

		.el-table td.el-table__cell div {
			box-sizing: border-box;
			color: #ffffff !important;
			height: auto;
			background: #ff000000;
			line-height: 34px;
			// text-align: center;
			// font-weight: 600;
		}

		.el-table--border .el-table__inner-wrapper:after {
			// background-color: rgb(23, 88, 158);;
		}

		.el-table td.el-table__cell .colmm_table {
			// height: 300px;
		}

		.el-table {
			--el-table-border-color: #ccc0;
			--el-table-border: 1px solid rgb(23, 88, 158);
		}
	}

	.img_inco {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}

	::v-deep .nav_box {
		.el-menu {
			border-right: none;
			--el-menu-hover-bg-color: rgba(15, 82, 163, 0.61) !important;
		}
	}

	.top {
		width: 100%;
		height: 110px;
		background: url(../assets/images/topBg1.png) no-repeat no-repeat;
		background-size: 100%, 100%;
		display: flex;
		align-items: center;
		position: relative;

		justify-content: space-between;

		.rg-date {
			position: absolute;
			top: 33%;
			left: 134px;
			color: #fff;
			font-size: 22px;
		}

		.rg-date_sfm {
			position: absolute;
			top: 64%;
			left: 201px;
			color: #fff;
			font-size: 22px;
		}

		.back_img {
			width: 60px;
			height: 60px;
			position: absolute;
			right: 75px;
			bottom: 22px;
		}

		.jianqu {
			min-width: 180px;
			height: 80px;
			color: #fff;
			padding-left: 50px;
			box-sizing: border-box;
			line-height: 80px;
			font-size: 22px;
			display: flex;
			align-items: center;
			position: absolute;
			right: 74px;
			top: 24px;

			.jq {
				// background: url(../assets/images/jqgl.png) no-repeat no-repeat;
				background-size: 100% 100%;

				height: 30px;
				width: 30px;
				cursor: pointer;
				margin-right: 10px;
			}
		}

		.title {
			color: #fff;
			font-size: 64px;
			transform: translateX(100px);
		}

		.date {
			width: 260px;
			height: 100%;
			color: #fff;
			line-height: 80px;
			display: flex;
			justify-content: space-between;
			position: relative;
			margin-right: 100px;
			position: absolute;
			right: 30px;
			display: none;

			.rq {
				position: absolute;
				font-size: 20px;
				top: 25px;
				top: 12px;
				right: 18px;
			}

			.sj {
				position: absolute;
				margin-left: 30px;
				bottom: 12px;
				font-size: 20px;
				right: 54px;
			}

			.xq {
				position: absolute;
				right: -58px;
				top: 12px;
				font-size: 20px;
			}
		}

		.top_name {
			position: absolute;
			color: white;
			right: 270px;
			font-size: 18px;
			top: 76px;
			font-weight: bold;
		}

		.top_btn {
			position: absolute;
			width: 160px;
			right: 47px;
			height: 32px;
			top: 74px;

			.back_login,
			.save_mm,
			.back_mm {
				width: 64px;
				height: 100%;
				cursor: pointer;
				transition: all 0.2s;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.back_mm {
				// border: 1px solid red;
			}

			.save_mm:hover {
				transform: scale(0.9);
			}

			.back_login:hover {
				transform: scale(0.9);
			}
		}

		.zuifan {
			width: 230px;
			height: 60px;
			position: absolute;
			top: 72px;
			right: 302px;
			display: flex;

			.bg {
				width: 80px;
				height: 60px;
				background: url(../assets/images/主界面-素材/罪犯.png) no-repeat no-repeat;
				background-size: 240% 100%;
			}

			.tit {
				margin-left: 15px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text-align: center;
				margin-top: 10px;

				span {
					color: #fff;
					margin-top: 5px;
					margin-bottom: 5px;
				}
			}
		}
	}

	.tow_mian {
		margin: 0;
		padding: 0;
		width: 100vw;
		height: calc(100vh - 110px);
		display: flex;
		align-items: center;
		justify-content: center;

		.tow_content {
			width: 1900px;
			height: 790px;
			display: flex;
			justify-content: space-between;

			.bigNav_box {
				width: 280px;
				height: 100%;
				border: 1px solid #073f97;
				background-color: rgb(2, 24, 53);

				.back_box {
					width: 100%;
					height: 50px;
					color: white;
					font-weight: bold;
					font-size: 14px;
				}
			}

			.nav_box {
				width: 280px;
				height: calc(100% - 50px);
				overflow-y: scroll;
			}

			.content {
				width: calc(1900px - 280px - 10px);
				height: 100%;
				border: 1px solid #073f97;
				background-color: rgb(8, 38, 78);
			}
		}
	}
</style>